<style scoped lang='less'>
    .holiday-list-mian {
        .action-cell {
            margin-bottom: 20px;
        }

        .home-list .search-block {
            display: flex;
            margin-bottom: 10px;
        }

        .input-search {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .home-list .selected-search {
            height: 200px;
            width: 100%;
            position: relative;
            border-radius: 4px;
            margin-bottom: 10px;

        }

        .home-list .selected-search .search-action {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
        }

        .home-list .selected-search .selected-arr {
            position: absolute;
            top: 50px;
            left: 20px;
            right: 20px;
            bottom: 10px;
            overflow: scroll;
        }

        .home-list .select-click {
            border: 1px solid #dddee1;
            border-radius: 4px;
            padding: 10px;
            font-weight: 500;
            text-align: center;
            width: 260px;
            margin-bottom: 10px;
        }

        .home-list .selected-search .selected-arr .selected-item {
            /*border-bottom: 1px solid #dfdfdf;*/
            margin-bottom: 10px;
            font-size: 15px;
        }
    }

</style>
<template>
    <div class="holiday-list-mian">
        <h4>我的请假</h4>
        <Alert show-icon>
            此处显示当前用户申请的请假情况列表。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="jumpPage('','HolidayApply')">
                <Icon type="md-add-circle" />
                添加
            </Button>
        </ButtonGroup>
        <!--<div class="home-list search-block">-->
        <!--<p @click="getPeopelData()" class="select-click">{{personalName}}</p>-->
        <!--<div v-if="selectPeopelIsShow" class="selected-search">-->
        <!--<div class="search-action">-->
        <!--<i-input class="input-search" placeholder="查询人姓名"></i-input>-->
        <!--</div>-->
        <!--<div class="selected-arr">-->
        <!--<template v-for="(item,index) in principalArr">-->
        <!--<p @click="choosePeople(item.id,item.personalname)" class="selected-item">-->
        <!--{{item.personalname}}</p>-->
        <!--</template>-->
        <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;<Button @click="searchEvent()" type="ghost" icon="ios-search">搜索</Button>&ndash;&gt;-->
        <!--</div>-->
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
            style="margin-top:15px;"></Table>
        <!--<div style="margin: 10px;overflow: hidden">-->
        <!--<div style="float: right;">-->
        <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
        <!--@on-change="changePage"></Page>-->
        <!--</div>-->
        <!--</div>-->
        <!--<Modal-->
        <!--v-model="modalIsShow"-->
        <!--title="选择下级审核员"-->
        <!--@on-ok="postNext"-->
        <!--@on-cancel="cancel">-->
        <!--<div class="home-list search-block">-->
        <!--<p>审核员：{{personalName}}</p>-->
        <!--<div v-if="selectPeopelIsShow" class="selected-search">-->
        <!--<div class="search-action">-->
        <!--<i-input class="input-search" v-model="nextName" placeholder="查询人姓名"></i-input>-->
        <!--</div>-->
        <!--<div class="selected-arr">-->
        <!--<template v-if="principalArr.length < 0">-->
        <!--<p class="selected-item">暂无数据</p>-->
        <!--</template>-->
        <!--<template v-else>-->
        <!--<template v-for="(item,index) in principalArr">-->
        <!--<p @click="choosePeople(item.id,item.personalname)" class="selected-item">-->
        <!--{{item.personalname}}</p>-->
        <!--</template>-->
        <!--</template>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</Modal>-->

        <!--审核操作-->
        <Modal v-model="setCheckIsShow" title="假条审核" @on-ok="handleSubmit('formValidate')"
               @on-cancel="setPwdIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="审核状态" prop="checkState">
                    <i-select v-model="formValidate.checkState" placeholder="请选择审核状态">
                        <i-option value="通过">通过</i-option>
                        <i-option value="拒绝">拒绝</i-option>
                        <i-option value="转交">转交</i-option>
                    </i-select>
                </Form-item>
                <Form-item label="是否需要其他审核员审核" prop="isNeedOtherChecker">
                    <i-select v-model="formValidate.isNeedOtherChecker" placeholder="请选择是否需要其它审核员审核">
                        <i-option value="true">需要</i-option>
                        <i-option value="false">不需要</i-option>
                    </i-select>
                </Form-item>
                <template v-if="formValidate.isNeedOtherChecker == 'true'">
                    <selectSearch :selectBaseInfo="selectBaseInfo" @post-data="getCompentensData"></selectSearch>
                </template>
                <Form-item label="原因" prop="reason">
                    <Input v-model="formValidate.reason" placeholder="请输入原因"></Input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import {Modal} from 'view-design';
    import selectSearch from '../../components/selectSearch';


    export default {
        data() {
            return {
                //下级审核员
                modalIsShow: true,
                nextName: '',
                principalId: '',
                principalArr: [],
                personalName: '请搜索',
                selectPeopelIsShow: false,
                nextRow: '',
                //审核
                setCheckIsShow: false,
                formValidate: {
                    checkState: '',
                    reason: '',
                    isNeedOtherChecker: '',
                },
                ruleValidate: {},
                checkRow: '',
                //选择部门
                selectBaseInfo: {
                    "title": '选择转交审核人',
                    "placeholder": '请输入审核人姓名',
                    "postUrl": apiUtil.urls.userList,
                    'postType': 'user',
                },
                reqpeopleDept: '',
                //表格数据
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '请假人',
                        key: 'Displayname',
                        align: 'center',
                    },
                    {
                        title: '开始日期',
                        key: 'Startdate',
                        align: 'center',
                    },
                    {
                        title: '返回日期',
                        key: 'Enddate',
                        align: 'center',
                    },
                    {
                        title: '外出地址',
                        key: 'Destination',
                        align: 'center',
                    },
                    {
                        title: '请假原因',
                        key: 'Reason',
                        align: 'center',
                    },
                    {
                        title: '请假类型',
                        key: 'RestType',
                        align: 'center',
                    },
                    {
                        title: '审核状态',
                        key: 'State',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.State == '待审批') {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                        },
                                        on: {
                                            click: () => {
                                                this.cancelApply(params.row)
                                            }
                                        }
                                    }, '取消请假申请'),
                                ])
                            }else if (params.row.State == '请假中'){
                                return  h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {},
                                    on: {
                                        click: () => {
                                            this.jumpPage(params.row.Id, 'HolidayContinueApply')
                                        }
                                    }
                                }, '续假')
                            }

                        }
                    }
                ]
            }
        },
        mounted() {
            let that = this;
            this.mockTableData();
        },
        components: {

            selectSearch
        },
        watch: {
            nextName: function (newVale, oldVale) {
                if (newVale != oldVale) {
                    this.searchNext(newVale);
                }
            }
        },
        component: {
            Modal
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    // creatorId: '03508730-6f42-438d-b9e7-2465a9653519',
                    creatorId: sessionStorage.getItem('userId'),
                }
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.FinishRest, para, function (res) {
                    that.$Loading.finish();
                    // that.total = res.Msg.TotalCount;
                    // that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg;

                    console.log('tableData:', res)
                });

            },
            /**
             * 审核
             */

            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {

                this.reqpeopleDept = value;
            },
            showCheckModal: function (row) {

                this.setCheckIsShow = true;
                this.checkRow = row;

            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                model.restId = this.checkRow.id;
                model.checkerId = '87415a1b-922e-4a94-83c6-8f16c74ab0fb';
                model.sendToPeopleIds = this.reqpeopleDept.resultId;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.RestCheck, params, function (res) {
                });
            },


            //提送下级审核员
            postNext() {
                let that = this;

                let para = {
                    restId: that.nextRow.id,
                    checkerId: that.nextRow.nextcheckerid,
                    nextCheckerId: that.principalId
                };
                // console.log('ddddddd')
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditRestToNext, para, function (res) {
                    that.$Loading.finish();

                    that.mockTableData();

                    this.$Message.info('操作成功 ');
                });

            },
            showNextModal: function (row) {
                this.modalIsShow = true;
                this.nextRow = row;

                console.log('row:', row)
            },
            cancel() {
                this.$Message.info('点击了取消');
            },
            searchNext: function (keyword) {
                let that = this;

                let para = {
                    keyword: keyword,
                };

                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.GetCheckerSearch, para, function (res) {
                    that.$Loading.finish();
                    that.principalArr = res.Msg;
                });
            },
            choosePeople: function (id, name) {
                this.principalId = id;
                this.personalName = name;
                this.selectPeopelIsShow = false;

            },
            //修改假条状态
            modalShow: function (row, state) {
                let that = this;
                this.$Modal.confirm({
                    title: '请填写拒绝理由',
                    content: '<input id="reson-input" style="border: 1px solid #DFDFDf;' +
                    'border-radius: 4px;' +
                    'padding: 5px 20px;">',
                    okText: "确定",
                    cancelText: "取消",
                    onOk: () => {

                        let reson = that.$jq('#reson-input').val();
                        that.EditRestToState(row, state, reson)
                    }

                });
            },
            EditRestToState(row, state, reson) {
                let that = this;

                let para = {
                    restId: row.id,
                    checkerId: row.nextcheckerid,
                    isAgree: state,
                    reason: reson,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditRestToAgree, para, function (res) {
                    that.$Loading.finish();

                    that.mockTableData();

                    console.log('tableData:', res)
                });

            },
            //取消请假申请
            cancelApply: function (row) {

                let that = this;

                this.$Modal.confirm({
                    title: '提示',
                    content: `确认取消该请假申请吗?`,
                    onOk: function () {
                        let para = {
                            creatorId: sessionStorage.getItem('userId'),
                            requestId: row.Id,
                        }
                        let params = that.$qs.stringify(para);

                        this.$Loading.start();

                        apiUtil.post(that, apiUtil.urls.CancelRestRequest, params, function (res) {
                            that.$Loading.finish();

                            that.mockTableData();

                        });
                    }
                })


            }
        },
    }
</script>
